<template>
	<view class="content">
		<!-- 开始填写信息 -->
		<view class="healthyRecords">
			<view class="MT48">
				<text class="title">基本信息</text>
				<text class="hint">请务必填写真实信息</text>
			</view>
			<view class="baseInfo MT28">
				<view class="item MT50">
					<text class="itemText">头像</text>
					<view class="itemR">
						<image :src="imgSrc" style="width: 108rpx;height: 108rpx;border-radius: 50%;"></image>
					</view>
				</view>
				<view class="line MT28"></view>
				<view class="item MT50" @click="openPopup(0)">
					<text class="itemText">姓名</text>
					<view class="itemR">
						<text>{{ name }}</text>
						<image src="../../../static/image/mine/icon_arrow.png"
							style="width: 17rpx;height: 32rpx;margin-left: 30rpx;"></image>
					</view>
				</view>
				<view class="line MT28"></view>
				<view class="item MT50">
					<text class="itemText">性别</text>
					<text class="itemText">{{sex}}</text>
				</view>
				<view class="line MT28"></view>
				<view class="item MT50">
					<text class="itemText">出生日期</text>
					<text class="birthday">{{ birthdayText }}</text>
					<!-- <gpp-date-picker @onCancel="onCancel" @onConfirm="onConfirm" :startDate="startDate"
						:endDate="endDate" :defaultValue="pickerDate">
					</gpp-date-picker> -->
				</view>
				<view class="line MT28"></view>
				<!-- 身高 -->
				<view class="item MT50" @click="openPopup(1)">
					<text class="itemText">身高</text>
					<view class="itemR">
						<text>{{ height }}cm</text>
						<image src="../../../static/image/mine/icon_arrow.png"
							style="width: 17rpx;height: 32rpx;margin-left: 30rpx;"></image>
					</view>
				</view>
				<view class="line MT28"></view>
				<!-- 体重 -->
				<view class="item MT50 MB50" @click="openPopup(2)">
					<text class="itemText">体重</text>
					<view class="itemR">
						<text>{{ weight }}kg</text>
						<image src="../../../static/image/mine/icon_arrow.png"
							style="width: 17rpx;height: 32rpx;margin-left: 30rpx;"></image>
					</view>
				</view>
			</view>
			<!-- 病史 -->
			<view class="MT48">
				<text class="title">过往病史</text>
				<text class="hint">请务必填写真实病史</text>
			</view>
			<view class="medicalHistory MT28">
				<view class="item MT50">
					<text class="itemText">中风史</text>
					<view class="choice">
						<!-- 选中 -->
						<view v-if="isStroke" class="choiceItem content" style="background-color: #CDDEF4;"
							@click="choiceStroke(0)"><text style="color: #0659C7;">有</text></view>
						<!-- 未选中 -->
						<view v-else class="choiceItem content" style="background-color: #FFFFFF;"
							@click="choiceStroke(0)"><text style="color: #333333;">有</text></view>
						<view v-if="!isStroke" class="choiceItem content" style="background-color: #CDDEF4;"
							@click="choiceStroke(1)"><text style="color: #0659C7;">无</text></view>
						<view v-else class="choiceItem content" style="background-color: #FFFFFF;"
							@click="choiceStroke(1)"><text style="color: #333333;">无</text></view>
					</view>
				</view>
				<view class="line MT28"></view>
				<view class="item MT50">
					<text class="itemText">高血压</text>
					<view class="choice">
						<!-- 选中 -->
						<view v-if="isHBPressure" class="choiceItem content" style="background-color: #CDDEF4;"
							@click="choiceHBPressure(0)">
							<text style="color: #0659C7;">有</text>
						</view>
						<!-- 未选中 -->
						<view v-else class="choiceItem content" style="background-color: #FFFFFF;"
							@click="choiceHBPressure(0)"><text style="color: #333333;">有</text></view>
						<view v-if="!isHBPressure" class="choiceItem content" style="background-color: #CDDEF4;"
							@click="choiceHBPressure(1)">
							<text style="color: #0659C7;">无</text>
						</view>
						<view v-else class="choiceItem content" style="background-color: #FFFFFF;"
							@click="choiceHBPressure(1)"><text style="color: #333333;">无</text></view>
					</view>
				</view>
				<view class="line MT28"></view>
				<view class="item MT50">
					<text class="itemText">高血糖</text>
					<view class="choice">
						<!-- 选中 -->
						<view v-if="isHyperglycemia" class="choiceItem content" style="background-color: #CDDEF4;"
							@click="choiceHyperglycemia(0)">
							<text style="color: #0659C7;">有</text>
						</view>
						<!-- 未选中 -->
						<view v-else class="choiceItem content" style="background-color: #FFFFFF;"
							@click="choiceHyperglycemia(0)"><text style="color: #333333;">有</text></view>
						<view v-if="!isHyperglycemia" class="choiceItem content" style="background-color: #CDDEF4;"
							@click="choiceHyperglycemia(1)">
							<text style="color: #0659C7;">无</text>
						</view>
						<view v-else class="choiceItem content" style="background-color: #FFFFFF;"
							@click="choiceHyperglycemia(1)"><text style="color: #333333;">无</text></view>
					</view>
				</view>
				<view class="line MT28"></view>
				<view class="item MT50">
					<text class="itemText">高血脂</text>
					<view class="choice">
						<!-- 选中 -->
						<view v-if="isHyperlipidemia" class="choiceItem content" style="background-color: #CDDEF4;"
							@click="choiceHyperlipidemia(0)">
							<text style="color: #0659C7;">有</text>
						</view>
						<!-- 未选中 -->
						<view v-else class="choiceItem content" style="background-color: #FFFFFF;"
							@click="choiceHyperlipidemia(0)"><text style="color: #333333;">有</text></view>
						<view v-if="!isHyperlipidemia" class="choiceItem content" style="background-color: #CDDEF4;"
							@click="choiceHyperlipidemia(1)">
							<text style="color: #0659C7;">无</text>
						</view>
						<view v-else class="choiceItem content" style="background-color: #FFFFFF;"
							@click="choiceHyperlipidemia(1)"><text style="color: #333333;">无</text></view>
					</view>
				</view>
				<view class="line MT28"></view>
				<view class="item MT50 MB50">
					<text class="itemText">心脏病</text>
					<view class="choice">
						<!-- 选中 -->
						<view v-if="isHeartDisease" class="choiceItem content" style="background-color: #CDDEF4;"
							@click="choiceHeartDisease(0)">
							<text style="color: #0659C7;">有</text>
						</view>
						<!-- 未选中 -->
						<view v-else class="choiceItem content" style="background-color: #FFFFFF;"
							@click="choiceHeartDisease(0)"><text style="color: #333333;">有</text></view>
						<view v-if="!isHeartDisease" class="choiceItem content" style="background-color: #CDDEF4;"
							@click="choiceHeartDisease(1)">
							<text style="color: #0659C7;">无</text>
						</view>
						<view v-else class="choiceItem content" style="background-color: #FFFFFF;"
							@click="choiceHeartDisease(1)"><text style="color: #333333;">无</text></view>
					</view>
				</view>
				<view class="line MT28"></view>
				<!-- <view class="item MT50 MB50">
					<text class="itemText">颈椎病</text>
					<view class="choice">
						<view v-if="isCervicalSpondylosis" class="choiceItem content" style="background-color: #CDDEF4;" @click="choiceCervicalSpondylosis(0)">
							<text style="color: #0659C7;">有</text>
						</view>
						<view v-else class="choiceItem content" style="background-color: #FFFFFF;" @click="choiceCervicalSpondylosis(0)"><text style="color: #333333;">有</text></view>
						<view v-if="!isCervicalSpondylosis" class="choiceItem content" style="background-color: #CDDEF4;" @click="choiceCervicalSpondylosis(1)">
							<text style="color: #0659C7;">无</text>
						</view>
						<view v-else class="choiceItem content" style="background-color: #FFFFFF;" @click="choiceCervicalSpondylosis(1)"><text style="color: #333333;">无</text></view>
					</view>
				</view> -->
			</view>
			<view class="MT48">
				<text class="title ">紧急联系人</text>
				<text class="hint">填写完成后会有短信告知对方</text>
			</view>
			<view class="phone" style="margin-top: 44rpx;" @click="openPopup(3)">
				<text class="contactName">{{ emergencyContactName }}</text>
				<image src="../../../static/image/mine/icon_arrow.png"
					style="width: 17rpx;height: 32rpx;margin-right: 30rpx;"></image>
			</view>
			<view class="phone" style="margin-top: 32rpx;" @click="openPopup(4)">
				<text class="contactPhone">{{ emergencyContactTelNum }}</text>
				<image src="../../../static/image/mine/icon_arrow.png"
					style="width: 17rpx;height: 32rpx;margin-right: 30rpx;"></image>
			</view>
			<!-- button  -->
			<view class="NextStepBtn content" @click="commit()"><text>确定</text></view>
		</view>
		<!-- 修改信息的弹窗 -->
		<uni-popup ref="popupPhone" :mask-click="false" :safe-area="false" type="dialog" style="z-index: 999;">
			<view class="popup1">
				<text class="popupTitle" v-text="popupText"></text>
				<view class="inputView content">
					<view style="width: 450rpx;">
						<input v-if="popupType == 0 || popupType == 3" type="text" value="" :placeholder="placeholder"
							v-model="inputValue" :maxlength="maxlength" @input="checkInput" />
						<input v-else type="number" value="" :placeholder="placeholder" v-model="inputValue"
							:maxlength="maxlength" />
					</view>
					<view style="width: 500rpx;height: 2rpx;background-color: #0659C7;"></view>
				</view>
				<view class="popup_bottomView">
					<view class="popup_bottomViewitem content"
						style="background-color: #FFFFFF;border-radius:0 0 0 15px;" @click="cancel()">
						<text style="color: #333333;">取消</text>
					</view>
					<view class="popup_bottomViewitem content"
						style="background-color: #0659C7;border-radius:0 0 15px 0;" @click="enter()">
						<text style="color: #FFFFFF;">确定</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import util from '../../../utils/utils.js';
	import * as api from '@/api/login';
	import gppDatePicker from '../../../components/gpp-datePicker/gpp-datePicker.vue';
	import regular from '@/api/regular';
	const app = getApp();
	export default {
		data() {
			return {
				userId: '',
				imgSrc: '', //用户的头像
				startDate: '1900-01-01',
				endDate: '',
				pickerDate: '1990-01-01',
				birthdayText: '请输入出生日期',
				telNum: '',
				name: '', //姓名
				sex: '男', //性别
				height: '', //身高
				weight: '', //体重
				age: 0, //年龄
				minDate: new Date(2020, 0, 1),
				maxDate: new Date(2025, 10, 1),
				currentDate: new Date(2021, 0, 17),
				isStroke: false, //是否中风
				isHBPressure: false, //是否高血压
				isHyperglycemia: false, //。。高血糖
				isHyperlipidemia: false, //。。。高血脂
				isHeartDisease: false, //..心脏病
				isCervicalSpondylosis: false, //颈椎病
				birthday: '', //生日
				emergencyContactName: '', //紧急联系人姓名
				emergencyContactTelNum: '', //紧急联系人手机号
				// 弹窗相关参数
				popupType: 0, //弹窗类型 0 姓名 1 身高 2 体重 3 紧急姓名  4 紧急电话
				placeholder: '请输入修改的姓名',
				popupText: '编辑姓名',
				maxlength: 7,
				// input的值
				inputValue: '',
				value: ''
			};
		},
		components: {
			gppDatePicker
		},
		onLoad(option) {
			// console.log(option);
			this.userId = this.$store.state.userInfo.currentUser.userId;
			if (option.userInfo != null || option.userInfo != undefined) {
				let userInfo = JSON.parse(option.userInfo);
				// console.log(userInfo);
				this.name = userInfo.neckName;
				this.sex = userInfo.sex;
				this.birthdayText = userInfo.birthday.slice(0, 10);
				this.height = userInfo.height;
				this.weight = userInfo.weight;
				this.isStroke = userInfo.stroke;
				this.isHBPressure = userInfo.hypertension;
				this.isHyperglycemia = userInfo.highBloodHyperglycemia;
				this.isHyperlipidemia = userInfo.highBloodLipids;
				this.isHeartDisease = userInfo.heartDisease;
				// 紧急联系人
				this.emergencyContactName = userInfo.contactName;
				this.emergencyContactTelNum = userInfo.contactPhone;
			}
			this.getHeadshot();
		},
		onShow() {
			this.endDate = util.Current_date();
			this.telNum = this.$store.state.userInfo.currentUser.phone;
		},
		// 自定义事件
		onUnload() {
			uni.$emit('updateUserInfo', {});
		},
		methods: {
			// 获取用户头像
			getHeadshot() {
				let that = this;
				let userId = this.userId;
				let data = {
					userId: userId,
					action: 'getHeadshot'
				};
				//调用接口请求个人信息
				api.getHeadshot(data)
					.then(function(res) {
						if (res.data.code == 2000) {
							that.imgSrc = res.data.data.shotBase64;
						}
					})
					.catch(function(error) {
						console.log('getHeadshot fail', error);
					});
			},
			onCancel() {},
			//限制只能输入汉字和字母
			checkInput: function(event) {
				var value = event.detail.value;
				if (!value || value == ' ') {
					return '';
				}
				const rule = /[^\u4E00-\u9FA5A-Za-z]+$/;
				this.$nextTick(function() {
					this.inputValue = value.replace(rule, '');
				});
			},
			onConfirm(e) {
				this.pickerDate = e.dateValue;
				this.birthdayText = e.dateValue;
				this.birthday = e.dateValue;
			},
			//中风
			choiceStroke(flag) {
				if (flag == 0) {
					this.isStroke = true;
				} else if (flag == 1) {
					this.isStroke = false;
				}
			},
			//高血压
			choiceHBPressure(flag) {
				if (flag == 0) {
					this.isHBPressure = true;
				} else if (flag == 1) {
					this.isHBPressure = false;
				}
			},
			// 高血糖
			choiceHyperglycemia(flag) {
				if (flag == 0) {
					this.isHyperglycemia = true;
				} else if (flag == 1) {
					this.isHyperglycemia = false;
				}
			},
			// 高血脂
			choiceHyperlipidemia(flag) {
				if (flag == 0) {
					this.isHyperlipidemia = true;
				} else if (flag == 1) {
					this.isHyperlipidemia = false;
				}
			},
			// 心脏病
			choiceHeartDisease(flag) {
				if (flag == 0) {
					this.isHeartDisease = true;
				} else if (flag == 1) {
					this.isHeartDisease = false;
				}
			},
			// 颈椎病
			choiceCervicalSpondylosis(flag) {
				if (flag == 0) {
					this.isCervicalSpondylosis = true;
				} else if (flag == 1) {
					this.isCervicalSpondylosis = false;
				}
			},
			//选择生日
			choiceBirthday() {
				this.$refs.popup1.open('bottom');
			},
			// 打开弹窗
			openPopup(type) {
				//弹窗类型 0 姓名 1 身高 2 体重 3 紧急姓名  4 紧急电话
				this.popupType = type;
				switch (type) {
					case 0:
						this.maxlength = 7;
						this.popupText = '编辑姓名';
						this.placeholder = '请输入修改的姓名';
						break;
					case 1:
						this.maxlength = 5;
						this.popupText = '编辑身高';
						this.placeholder = '请输入修改的身高';
						break;
					case 2:
						this.maxlength = 5;
						this.popupText = '编辑体重';
						this.placeholder = '请输入修改的体重';
						break;
					case 3:
						this.maxlength = 7;
						this.popupText = '编辑紧急联系人';
						this.placeholder = '请输入修改的联系人';
						break;
					case 4:
						this.maxlength = 11;
						this.popupText = '编辑电话';
						this.placeholder = '请输入修改的电话号码';
						break;
				}
				this.$refs.popupPhone.open('center');
			},
			// 取消
			cancel() {
				this.$refs.popupPhone.close();
			},
			// 确定弹窗
			enter() {
				//弹窗类型 0 姓名 1 身高 2 体重 3 紧急姓名  4 紧急电话
				let type = this.popupType;
				// console.log('input>>'+ this.inputValue);
				switch (type) {
					case 0:
						this.name = this.inputValue;
						break;
					case 1:
						this.height = this.inputValue;
						break;
					case 2:
						this.weight = this.inputValue;
						break;
					case 3:
						this.emergencyContactName = this.inputValue;
						break;
					case 4:
						this.emergencyContactTelNum = this.inputValue;
						break;
				}
				this.inputValue = '';
				this.$refs.popupPhone.close();
			},
			// Next
			commit() {
				// 这里做约束  所有可输入区域不可为空
				if (this.name == '') {
					this.showToast('姓名不可为空!');
					return;
				} else if (regular.checkName(this.name)) {
					this.showToast('姓名只可以为汉字、字母');
					return;
				} else if (this.height == '') {
					this.showToast('身高不可为空!');
					return;
				} else if (!regular.checkHeight(this.height)) {
					this.showToast('身高不能为负数或者小数!');
					return;
				} else if (this.weight == '') {
					this.showToast('体重不可为空!');
					return;
					s;
				} else if (!regular.checkHeight(this.weight)) {
					this.showToast('体重不能为负数或者小数!');
					return;
				} else if (this.birthdayText == '') {
					this.showToast('生日不可为空!');
					return;
				} else if (this.emergencyContactName == '') {
					this.showToast('紧急联系人姓名不可为空!');
					return;
				} else if (regular.checkName(this.emergencyContactName)) {
					this.showToast('紧急联系人姓名只可以为汉字、字母');
					return;
				} else if (this.emergencyContactTelNum == '') {
					this.showToast('紧急联系人手机号不可为空');
					return;
				} else if (!this.$regular.phoneReg.test(this.emergencyContactTelNum)) {
					this.showToast('手机号格式不正确,请重新输入');
					return;
				} else if (this.emergencyContactTelNum == this.telNum) {
					this.showToast('紧急联系人手机号不可与本人一样');
					return;
				}
				this.commitInof();
			},
			// 消息提示框
			showToast(str) {
				uni.showToast({
					title: str,
					icon: 'none'
				});
			},
			//  提交修改后的信息
			commitInof() {
				let that = this;
				let userId = this.$store.state.userInfo.currentUser.userId;
				let phone = this.$store.state.userInfo.currentUser.phone;
				let data = {
					userId: userId,
					action: 'updateEiUserInfo',
					params: {
						contactPhone: that.emergencyContactTelNum,
						highBloodHyperglycemia: that.isHyperglycemia,
						weight: that.weight,
						hypertension: that.isHBPressure,
						sex: that.sex,
						heartDisease: that.isHeartDisease,
						stroke: that.isStroke,
						contactName: that.emergencyContactName,
						height: that.height,
						neckName: that.name,
						birthday: that.birthdayText,
						phone: phone,
						highBloodLipids: that.isHyperlipidemia
					}
				};
				api.updateEiUserInfo(data)
					.then(function(res) {
						console.log('updateUserInfo  Success', res);
						if (res.data.code == 2000) {
							that.$store.commit('userBaseInfo',data.params)
							uni.navigateBack({
								delta: 1
							});
						}
					}).catch(function(error) {
						console.log('updateUserInfo fail', error);
					});
			}
		}
	};
</script>

<style>
	/* @import '@/common/uni-nvue.scss'; */
	/* @import url("@/"); */
	page {
		background-color: #fafafa;
	}

	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
	}

	.item {
		height: 50px;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.MT60 {
		margin-top: 60rpx;
	}

	.MT28 {
		margin-top: 28rpx;
	}

	.MT48 {
		margin-top: 48rpx;
	}

	.MT50 {
		margin-top: 50rpx;
	}

	.MB50 {
		margin-bottom: 50rpx;
	}

	/* 填写健康档案页 */
	.healthyRecords {
		margin-top: 48rpx;
		background-color: #fafafa;
	}

	.title {
		font-size: 44rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #333333;
	}

	.hint {
		margin-left: 18rpx;
		font-size: 26rpx;
		font-family: Source Han Sans CN;
		font-weight: normal;
		color: #666666;
	}

	.baseInfo {
		margin-top: 32rpx;
		width: 700rpx;
		border-radius: 15px;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.line {
		width: 645rpx;
		height: 1px;
		background-color: #f0f0f0;
	}

	.item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 610rpx;
	}

	.itemR {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.itemR text {
		font-size: 38rpx;
		font-family: Source Han Sans CN;
		font-weight: normal;
		color: #000000;
	}

	.itemText {
		font-size: 38rpx;
		font-family: Source Han Sans CN;
		font-weight: normal;
		color: #000000;
	}

	.choice {
		width: 280rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.choiceItem {
		width: 140rpx;
		height: 60rpx;
		border-radius: 15rpx;
	}

	.choiceItem text {
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: normal;
	}

	.input {
		width: 280rpx;
	}

	.placeholderStyle {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: normal;
		color: #999999;
	}

	/* 出生日期 */
	.birthday {
		font-size: 38rpx;
		font-family: Source Han Sans CN;
		font-weight: normal;
		color: #000000;
	}

	/* 过往病史 */
	.medicalHistory {
		width: 700rpx;
		height: 940rpx;
		border-radius: 15px;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* 紧急联系人 */
	.phone {
		width: 700rpx;
		height: 122rpx;
		background-color: #ffffff;
		border-radius: 15px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		/* position: relative; */
	}

	.phonePlaceSytle {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: normal;
		color: #666666;
	}

	.NextStepBtn {
		margin-top: 92rpx;
		margin-bottom: 100rpx;
		background-color: #0659c7;
		border-radius: 50px;
		width: 700rpx;
		height: 100rpx;
	}

	.NextStepBtn text {
		font-size: 44rpx;
		font-family: Source Han Sans CN;
		font-weight: normal;
		color: #ffffff;
	}

	.contactName {
		margin-left: 45rpx;
		font-size: 38rpx;
		font-family: Source Han Sans CN;
		font-weight: normal;
		color: #000000;
	}

	.contactPhone {
		margin-left: 45rpx;
		font-size: 44rpx;
		font-family: Roboto;
		font-weight: bold;
		color: #000000;
	}

	/* 弹出层 */

	.popup1 {
		width: 620rpx;
		background-color: white;
		border-radius: 15px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.popupTitle {
		margin-top: 75rpx;
		font-size: 58rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #000000;
	}

	.inputView {
		margin: 100rpx auto 140rpx;
	}

	.icon_content {
		margin-top: 93rpx;
		width: 238rpx;
		height: 238rpx;
	}

	.popup1Content {
		margin-top: 20rpx;
		font-size: 52rpx;
		font-family: Source Han Sans CN;
		font-weight: normal;
		color: #333333;
	}

	/* popup 底部两个按钮区域 */
	.popup_bottomView {
		width: 100%;
		height: 137rpx;
		border-top: #333333;
		/* border: 1px #323233 solid; */
		border-radius: 0 0 15px 15px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #f0f0f0;
	}

	.popup_bottomViewitem {
		margin-top: 2rpx;
		width: 50%;
		height: 100%;
	}

	.popup_bottomViewitem {
		font-size: 44rpx;
		font-family: Source Han Sans CN;
		font-weight: normal;
	}

	.icon_close {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top: 26rpx;
		right: 35rpx;
	}

	.popupBottomView {
		margin-bottom: 0rpx;
		width: 100%;
		height: 120rpx;
		border-radius: 0 0 15px 15px;
		background-color: #0659c7;
	}

	.popupBottomView text {
		font-size: 44rpx;
		font-family: Source Han Sans CN;
		font-weight: normal;
		color: #ffffff;
	}
</style>